import { useUserStore } from '@/stores'
import router from '@/router'
import axios from 'axios'
import { showFailToast } from 'vant'

// 1. 新axios实例，基础配置
/** 背景：
 * 实际开发中后台的请求地址，在开发环境和生产环境不一样的
 * api请求地址：
 * 1. 开发期间（开发环境=> pnpm dev）：可能是一个ip地址或者locahost:7001(临时)
 * 2. 生产期间（生产环境=> pnpm build）：就是一个域名
 */
// 说明：baseURL会根据不同的环境，读取对应环境的环境变量值
// dev: http://localhost:7001
// prod: https://consult-api.itheima.net/
const baseURL = import.meta.env.VITE_APP_BASEURL
const request = axios.create({
  baseURL,
  timeout: 10000
})

// 2. 请求拦截器，携带token
request.interceptors.request.use(
  (config) => {
    // 场景1: 统一设置请求头header,携带token
    const store = useUserStore()
    if (store.user?.token) {
      config.headers.Authorization = `Bearer ${store.user.token}`
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 3. 响应拦截器，剥离无效数据，401拦截
request.interceptors.response.use(
  (res) => {
    // 场景2:后台约定，响应成功，但是code不是10000，是业务逻辑失败
    if (res.data?.code !== 10000) {
      showFailToast(res.data.message)
      return Promise.reject(res.data)
    }
    // 业务逻辑成功，返回响应数据，作为axios成功的结果
    return res.data.data
  },
  (err) => {
    // 场景3: token失效
    if (err.response.status === 401) {
      // 删除用户信息
      const store = useUserStore()
      store.delUser()
      // 跳转登录，带上接口失效所在页面的地址，登录完成后回跳使用
      // 说明：用户正在访问个人中心页面，调用获取用户数据api,token失效了，出现401
      // 可以通过router.currentRoute.value.fullPath获取当前401页面的地址
      // 以便将来登录成功后，跳回到上次访问的页面=》跳到个人中心 =》用户体验好
      // 说明：fullPath全路径，如果地址上有参数会携带参数=》/user?a=1
      // 说明：vue2:router.currentRoute.fullPath  | vue3: router.currentRoute.value.fullPath
      router.push(`/login?returnUrl=${router.currentRoute.value.fullPath}`)
    }
    return Promise.reject(err)
  }
)

export { baseURL, request }
